<template>
    <div class="wrap">
        <el-row>
            <el-col class="top-title" :span="24">
                <el-tabs v-model="activeName" class="" type="card">
                    <el-tab-pane label="管理招聘信息" name="first">
                        <div class="wraps">
                            <el-row class="titleName">
                                <el-col :span="24">
                                    <div class="header">
                                        <div class="left">
                                            <ul class="listTitle">
                                                <li class="oli xxx">序号</li>
                                                <li class="oli">发布日期</li>
                                                <li class="oli">工作地点</li>
                                                <li class="oli">招聘类型</li>
                                                <li class="oli">浏览次数</li>
                                                <li class="oli">状态</li>
                                                <li class="oli">标题</li>
                                            </ul>
                                        </div>

                                        <div class="rights">操作</div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row class="listArr">
                                <el-col :span="24">
                                    <div class="headerList" v-for="item, index in dataList">
                                        <div class="left">
                                            <ul class="listTitles">
                                                <li class="olis xx">{{ item.id }}</li>
                                                <li class="olis a">
                                                    <div class="time">
                                                        2024年11月27日
                                                    </div>
                                                    <div class="green">
                                                        <div class="qius"></div>
                                                        <div class="qiu">08:36</div>
                                                    </div>
                                                </li>
                                                <li class="olis b">
                                                    <div class="times">
                                                        公司新闻
                                                    </div>
                                                    <div class="greens">
                                                        <div class="qius"></div>
                                                        <div class="qiu">08:36</div>
                                                    </div>
                                                </li>
                                                <li class="olis c">{{ item.workAddress
                                                    }}</li>
                                                <li class="olis d">298,87</li>
                                                <li class="olis e">{{ item.status }}</li>
                                                <li class="olis f">{{ item.positionName }}</li>
                                            </ul>
                                        </div>
                                        <div class="right">
                                            <el-checkbox class="check" v-model="selectedIds"
                                                :label="(item.id)"></el-checkbox>
                                            <el-button type="text" class="deletess delete"
                                                @click="updataList(item.id)">编辑</el-button>
                                            <el-button type="text" class="deletes delete"
                                                @click="dialogFormVisible = false, open(item.id)">删除</el-button>


                                            <el-dialog title="更改信息" :visible.sync="dialogFormVisible"
                                                :label-width="formLabelWidths">
                                                <el-form :model="form" :label-width="formLabelWidths">
                                                    <el-form-item label="标题" :label-width="formLabelWidth">
                                                        <el-input v-model="form.name" :label-width="formLabelWidthss"
                                                            autocomplete="off"></el-input>
                                                    </el-form-item>
                                                    <el-form-item label="描述" :label-width="formLabelWidth">
                                                        <el-input v-model="form.update" :label-width="formLabelWidthss"
                                                            autocomplete="off"></el-input>
                                                    </el-form-item>
                                                </el-form>
                                                <div slot="footer" class="dialog-footer">
                                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                                    <el-button type="primary" @click="enters">确
                                                        定</el-button>
                                                </div>
                                            </el-dialog>

                                        </div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-pagination background layout="prev, pager, next" :total="pagination.total"
                                :current-page="pagination.currentPage" :page-size="pagination.pageSize"
                                @current-change="handleCurrentChange">
                            </el-pagination>
                            <el-row class="rowss">
                                <el-button class="dele" type="primary" @click="handleBatchDelete">批量删除</el-button>
                            </el-row>
                        </div>

                    </el-tab-pane>
                    <el-tab-pane label="新增招聘信息" name="second">
                        <el-main>
                            <el-card class="box-card">
                                <div class="boxList">
                                    <div class="itemBox1">
                                        <div class="topName">岗位名称</div>
                                        <div class="inputName">
                                            <input type="text" class="inps" placeholder="请输入岗位名称">
                                            <input type="text" class="inps" placeholder="请输入岗位名称">
                                            <input type="text" class="inps" placeholder="请输入岗位名称">
                                        </div>
                                    </div>
                                    <div class="itemBox2">
                                        <div class="two1">招聘状态</div>
                                        <div class="two2">
                                            <div class="imgss">
                                                <img src="/jinsi-backend/public/qie1.png" class="smoll">
                                            </div>
                                            <div class="t2">正常发布</div>
                                            <div class="imgss">
                                                <img src="/jinsi-backend/public/qie2.png" class="smoll">
                                            </div>
                                            <div class="t2">停止发布</div>
                                        </div>
                                        <div class="two1">招聘类型</div>
                                        <div class="two2">
                                            <div>社会招聘</div>
                                            <div>校园招聘</div>
                                        </div>
                                    </div>
                                    <div class="itemBox3">
                                        <div class="therr1">
                                            <div class="therrname">工作地点：</div>
                                            <input type="text" placeholder="请输入工作地点" class="work">
                                        </div>
                                        <div class="therr1">
                                            <div class="therrname">投资邮箱：</div>
                                            <input type="text" placeholder="请输投递点" class="work">
                                        </div>
                                        <div class="therr1">
                                            <div class="therrname">薪资待遇：</div>
                                            <input type="text" class="smollInp" id="">
                                            <div class="borders"></div>
                                            <input type="text" class="smollInp" id="">
                                        </div>
                                    </div>
                                    <div class="itemBox4">
                                        <div class="fore1">
                                            <div class="nameLeft">发布日期</div>
                                            <input type="text" class="bgInp" id="">
                                        </div>
                                        <div class="fore1">
                                            <div class="nameLeft">来源</div>
                                            <input type="text" class="bgInp" id="">
                                        </div>
                                        <div class="fore1">
                                            <div class="nameLeft">作者</div>
                                            <input type="text" class="bgInp" v-model="text" id="">
                                        </div>
                                    </div>
                                </div>
                                <div class="contBox">
                                    <h1>编辑内容</h1>
                                    <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="textarea">
                                    </el-input>
                                    <el-row>
                                        <el-button plain>预览</el-button>
                                        <el-button plain @click="addList">提交</el-button>
                                    </el-row>
                                </div>
                            </el-card>
                        </el-main>
                    </el-tab-pane>
                </el-tabs>
            </el-col>

            <!-- <el-pagination background layout="prev, pager, next" :total="1000">
            </el-pagination> -->
        </el-row>

    </div>

</template>

<script>
import { postArr } from '../../../src/request/api/postArr'
import { getArr } from '../../../src/request/api/getArr'
import { putArr } from '../../../src/request/api/putArr'
import { deleteuser } from "../../request/api/userlist"
import {
    paginat
} from "../../request/api/orderlist";
export default {
    data() {
        return {
            selectedIds: [],
            // addtext: '',
            text: "",
            activeName: 'first',
            input: "",
            name: "Index",
            radio: "1",
            imageUrl: "",
            textarea: "",
            activeName: "first",

            dataList: [
            ],
            pagination: {
                currentPage: 1,
                pageSize: 10,
                total: 0,
            },
            dialogTableVisible: false,
            dialogFormVisible: false,
            idss: "",
            form: {
                name: '',
                update: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '100px',
            formLabelWidths: '200px',
            formLabelWidthss: '200px'
            // addCart: []
        }

    },
    methods: {
        //批量删除
        async handleBatchDelete() {
            if (this.selectedIds.length === 0) {
                this.$message.warning("请先选择需要批量删除的数据");
                return;
            }
            this.$confirm("此操作将永久删除选中文件，是否继续？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    try {
                        let res = await this.axios({
                            url: `http://123.56.105.243:8080/admin/recruit/deleteRecruits`,
                            method: "delete",
                            data: { ids: this.selectedIds },
                        });
                        this.$message.success("删除成功！");
                        this.setlist();
                        this.selectedIds = []; // 清空选中的项
                    } catch (error) {
                        console.error("批量删除数据失败：", error);
                        this.$message.error("删除失败，请重试");
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        //删除接口
        open(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
                .then(async () => {
                    let res = await deleteuser(`/admin/recruit/deleteRecruit/${id}`)
                    console.log(res, "rerererereer");
                    if (res.data.code == 200) {
                        this.$message({ type: 'success', message: '删除成功!' });
                        this.setlist();

                    }
                }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }) })
        },
        //添加招聘信息
        async addList() {
            let ress = await postArr('/admin/recruit/addRecruit',
                {
                    // "recruitAddDTO": true,
                    "issuerBy": "",
                    "jobEmail": '',
                    "positionName": this.textarea,
                    "releaseDate": "",
                    "salary": 0,
                    "status": 0,
                    "type": 0,
                    "viewCount": 0,
                    "workAddress": this.text,
                    "workRequirements": ""
                }
            )
            console.log('add--------', ress);
            this.setlist()
        },

        //分页
        async setlist() {
            try {
                const res1 = await getArr('/admin/recruit/page', {
                    pageNum: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                });
                this.pagination.total = res1.data.total;
                this.dataList = res1.data.rows;

                console.log('aaaaaaaaa', this.dataList);

            } catch (error) {
                console.error("获取数据失败：", error);
            }
        },
        //编辑接口
        async enters() {
            let res2 = await postArr('/admin/recruit/updateRecruit',
                {
                    "createBy": "",
                    "createTime": "",
                    "id": 956,
                    "isDelete": 0,
                    "issuerBy": "",
                    "jobEmail": "aa",
                    "positionName": this.form.update,
                    "releaseDate": "",
                    "salary": 2,
                    "status": 2,
                    "type": 1,
                    "updateBy": "",
                    "updateTime": "",
                    "viewCount": 2,
                    "workAddress": "a",
                    "workRequirements": "a"
                }
            )
            console.log("id----", this.idss);
            console.log('res2----', res2);
            this.dialogFormVisible = false
            this.setlist()


        },
        async updataList(id) {
            let ress = this.dataList.find(item => {
                return item.id == id
            })
            console.log("ressss", ress);

            this.form.name = ress.positionName
            this.idss = id

            this.dialogFormVisible = true

        },
        handleCurrentChange(newPage) {
            this.pagination.currentPage = newPage;
            this.setlist();
        },

        handleClick(tab, event) {
            console.log(tab, event);
        },
    },
    created() {
        this.setlist()
        // this.delets()
        // this.open()
        // this.addList()
    }
}
</script>
<style lang="scss">
* {
    margin: 0;
    padding: 0;
}

.rowss {
    padding-left: 1600px;

    .dele {
        font-size: 10px;
        line-height: 6px;
        width: 80px;
        height: 30px;
        text-align: center;
    }
}

.check {
    margin-top: 6px;
    margin-right: 4px;
}

.listArr {
    margin-bottom: 20px;

}

.el-main {
    padding: 0;
}

.boxList {
    width: 1760px;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;

    .itemBox1 {
        width: 440px;
        height: 130px;

        .topName {
            width: 72px;
            height: 18px;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .inputName {
            width: 440px;
            height: 60px;
            display: flex;
            justify-content: space-between;

            .inps {
                width: 142px;
                height: 60px;
                text-align: center;
                line-height: 60px;
                background: #F6F8FB;
                border: none;
                border-radius: 5px;
            }
        }

    }

    .itemBox2 {
        width: 150px;
        height: 130px;

        .two1 {
            width: 56px;
            height: 18px;
            margin-bottom: 6px;
            font-size: 14px;
        }

        .two2 {
            font-size: 14px;
            width: 150px;
            height: 18px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;

            .smoll {
                vertical-align: middle;
            }
        }
    }

    .itemBox3 {
        width: 240px;
        height: 130px;
        font-size: 14px;

        .therr1 {
            font-size: 14px;
            width: 240px;
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;

            .work {
                width: 160px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                background: #EFF1F8;
                border: none;
                border-radius: 5px;

            }

            .smollInp {
                width: 60px;
                background: #EFF1F8;
                border-radius: 5px;
                height: 30px;
                border: none;
            }

            .borders {
                width: 24px;
                height: 1px;
                background: #EFF1F8;
                margin-top: 14px;
            }
        }
    }

    .itemBox4 {
        width: 140px;
        height: 130px;

        .fore1 {
            width: 140px;
            height: 24px;
            margin-bottom: 10px;
            display: flex;

            .nameLeft {
                font-size: 13px;
                width: 52px;
                height: 24px;
                text-align: left;
                line-height: 24px;
                margin-right: 15px;
            }

            .bgInp {
                width: 70px;
                height: 24px;
                border: none;
                background: #EFF1F8;
                text-align: center;
                line-height: 24px;
                border-radius: 5px;
            }
        }
    }

}

.contBox {
    width: 100%;
    height: 100%;

    h1 {
        font-size: 18px;
        color: #2c3d5c;
        margin: 0 0 20px 0;
    }

    .el-textarea {
        margin-bottom: 80px;
    }

    .el-row {
        margin-bottom: 300px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}


.wrap {
    width: 1840px;
    height: 100%;
    /* padding: 20px; */
    margin: 0 auto;
    background: #F6F8FB;
}

.wraps {
    width: 1800px;
    height: 100%;
    padding: 20px;
    margin: 0 auto;
    background: #F6F8FB;
}

.el-tabs__header {
    margin: 0;
}

.top-title {
    width: 1738px;
    height: 40px;
    /* margin-bottom: 10px; */
    display: flex;
}

.tab {
    width: 141px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    margin-right: 20px;
    border-radius: 10px 10px 0 0;
}

.active {
    background: #2567FF;
    color: #fff;
}

.header {
    width: 1738px;
    height: 71px;
    display: flex;
    justify-content: space-between;
}

.titleName {
    background: #fff;
}

.headerList {
    background: #fff;
}

.listTitle {
    list-style: none;
    width: 800px;
    display: flex;
    justify-content: space-between;
}

.oli {
    line-height: 71px;
    background: #fff;
}

.xxx {
    width: 40px;
    height: 40px;
    line-height: 71px;
    /* background: #EFF1F8; */
    text-align: center;
    /* border-radius: 50%; */
}

.xx {
    width: 40px;
    height: 40px;
    margin-top: 15px;
    line-height: 40px;
    background: #EFF1F8;
    text-align: center;
    border-radius: 50%;

}

.rights {
    width: 80px;
    text-align: left;
    line-height: 71px;
}

.right {
    float: right;
    display: flex;
}

.headerList {
    display: flex;
    margin-bottom: 4px;
}

.listTitles {
    list-style: none;
    width: 1400px;
    height: 71px;
    position: relative;
}

.olis {
    // height: 71px;

    font-size: 15px;
    float: left;
}

.a {
    width: 113px;
    height: 71px;
    margin-left: 50px;
    font-size: 15px;
    text-align: center;
}

.time {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    // margin-bottom: 10px;
}

.green {
    display: flex;
    width: 110px;
    height: 22px;
    justify-content: space-evenly;
}

.greens {
    display: flex;
    width: 90px;
    height: 22px;
    justify-content: space-evenly;
    margin-left: 18px;
}

.qiu {
    font-size: 12px;
    line-height: 20px;
}

.qius {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #44D600;
    margin-top: 4px;
}

.b {
    width: 90px;
    margin-left: 20px;
    font-size: 15px;
}

.times {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    text-align: right;
    // margin-bottom: 10px;
}

.c {
    position: absolute;
    left: 400px;
    // margin-left: 85px;
    line-height: 50px;

}

.d {
    width: 58px;
    height: 41px;
    background: #ECFBE6;
    color: #44D600;
    padding: 0 8px 8px 8px;
    // margin-left: 74px;
    line-height: 50px;
    position: absolute;
    left: 520px;

}

.e {
    // margin-left: 65px;
    position: absolute;
    left: 675px;
    line-height: 50px;

}

.f {
    width: 200px;
    text-align: left;
    // margin-left: 10px;
    line-height: 50px;
    padding-left: 50px;
    position: absolute;
    left: 720px;
}

.left {
    float: left;
}

.right {
    margin-top: 10px;
    width: 200px;
    /* float: right; */
    /* line-height: 41px; */
    margin-left: 200px;
}

.delete {
    width: 55px;
    height: 25px;
    // line-height: 25px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 10px;
    margin-top: 4px;
    line-height: 6px;
}

.deletess {
    background: #44D600;
    margin-left: 10px
}

.deletes {
    background: #FF3838;
}
</style>